<template>
  <div class="box_yj" ref="parent">
    <span></span>

    <div class="section-header">三医人才引进占比</div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { get_TalentIn_YiXueTalent,get_TalentIn_YiYaoTalent,get_TalentIn_YiLiaoTalent, getTalentIntroduction } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: {},
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    },
    completePer() {
      let tempArr = [];
      this.chartData.plans.value.forEach((item, index) => {
        tempArr = [...tempArr,Math.round((this.chartData.actual.value[index]/item)*100)]
      });
      return tempArr
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init(){
      this.jz=false
      getTalentIntroduction(this.dateProp)
      .then(res=>{
        this.jz=true
        if(res.data.data && res.data.data.axis.length) {
          this.chartData = res.data.data
          this.initcharts();
        }else{
          this.chartData = null
        }
      })
      // this.$nextTick(_=>{
      //   // this.chartData = [{AreaName:'医学人才',Number:19,jNumber:30},{AreaName:'医药人才',Number:110,jNumber:120},{AreaName:'医疗人才',Number:12,jNumber:40}]
      //   this.initcharts();
      // })
    },
    initcharts() {
       let option = {
          grid: {
            top: 50,
            bottom: 20
          },
          // legend: {
          //   data: ['计划引进人数', '实际引进人数']
          // },
          tooltip: {
            trigger: 'axis',
            // axisPointer: {
            //   type: 'cross'
            // }
          },
          legend: {
              data: this.legendData,
              textStyle: {
                color: 'rgba(255,255,255,1)',
                fontSize:10
              },
              left: 'center',
              width: this.setStyle - 30,
              itemWidth: 10,
              itemHeight: 10,
              top: '0',
              padding:[10,0,0,0]
          },
          xAxis: {
              type: 'category',
              data: this.chartData.axis,
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,1)'
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
          },
          yAxis: [
            {
              type: 'value',
              name: '人数(人)',
              nameTextStyle:{
                color:'rgba(255,255,255,.3)',
                fontSize:'10'
              },
              position: 'left',
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,.3)'
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
            },{
              type: 'value',
              name: '完成率(%)',
              nameTextStyle:{
                color:'rgba(255,255,255,.3)',
                fontSize:'10'
              },
              position: 'right',
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,.3)'
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
            },
          ],
          series: [{
              name:'计划引进人数',
              data: this.chartData.plans.value,
              type: 'bar',
              barGap: '-100%',//添加此配置项即为重叠效果
              barWidth: 20,
              itemStyle: {
                color: 'rgba(255,255,255,.5)'
              }
          },{
              name:'实际引进人数',
              data: this.chartData.actual.value,
              type: 'bar',
              barWidth: 30,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [
                        {offset: 0, color: '#2a8ad0'},
                        {offset: 1, color: '#3af3ce'}
                    ]
                )
              }
          },{
              name:'完成率(%)',
              data: this.completePer,
              type: 'line',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  formatter: '{c}%',
                  textStyle: {
                    fontSize: 12,
                    color: 'rgba(255,255,255,.5)'
                  },
                }
              },
              yAxisIndex: 1,
              itemStyle: {
                color: '#ddd'
              }
          }]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .main-wrapper /deep/ .el-col
    height 100%
    text-align center
  .label
    color #ffffff
  .value
    color #8ebafb
    font-size 24px
    margin-top 10px
    font-weight bold
</style>